<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>

<body>
<div align="center" id="app">
    <font face="楷体" size="10">
        <b style="color: #66b1ff">注册账号页面</b>
    </font>

    <form action="/document/users" method="post">
        <table>
            <tr>
                <td>用户昵称：</td>
                <td>
                    <input name="username" type="text" id="username">
                </td>
                <td>
                    <p style="color: red" th:text="${registerMessageName}" th:if="${not #strings.isEmpty(registerMessageName)}"></p>
                </td>
            </tr>
            <tr>
                <td>用户账号：</td>
                <td>
                    <input name="userNumber" type="text" id="userNumber">
                    <div style="color: red"><div id="errorMsg" style="display: none">该账号已被注册过（不能为空！）或者格式错误，请重新输入！</div></div>
                </td>
                <td>
                    <p style="color: red" th:text="${registerMessageNumber}" th:if="${not #strings.isEmpty(registerMessageNumber)}"></p>
                    <p style="color: red" th:text="${registerMessageNumberFormat}" th:if="${not #strings.isEmpty(registerMessageNumberFormat)}"></p>
<!--                    <p style="color: red" th:text="${messageNumberFormat01}" th:if="${not #strings.isEmpty(messageNumberFormat01)}"></p>-->
                </td>
            </tr>
            <tr>
                <td>用户密码：</td>
                <td>
                    <input name="password" type="password" id="password">
                </td>
                <td>
                    <p style="color: red" th:text="${registerMessagePassword}" th:if="${not #strings.isEmpty(registerMessagePassword)}"></p>
                </td>
            </tr>
            <tr>
                <td>请输入验证码：</td>
                <td>
                    <input name="code" type="text" id="code"> <button type="button" id="but">发送验证码</button>
                </td>
                <td>
                    <p style="color: red" th:text="${registerMessageCode}" th:if="${not #strings.isEmpty(registerMessageCode)}"></p>
                </td>
            </tr>
        </table>

        <br>
        <div align="center">
            <input value="注册" type="submit" id="register">
            <br><br>
            <!--<button onclick="r()" type="button">返回首页</button>-->
        </div>
    </form>
    <form action="/document/users/in" method="post">
        <input type="submit" value="返回首页">
    </form>
</div>
</body>

<!-- 引入组件库 -->
<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/plugins/elementui/index.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/axios-0.18.0.js}"></script>

<script>
    $("#but").click(function(){
        var error = document.getElementById("errorMsg");
        error.style.display = "none";
        var userNumber = document.getElementById("userNumber").value;
        if($.isEmptyObject(userNumber)){
            alert("用户账号不能为空！")
        } else {
            alert("请稍等！正在准备给"+userNumber+"发送验证码~~~")
            axios.post("/document/users/send/" + userNumber).then((res) => {
                if(res.data.flag){
                    error.style.display = "none";
                    alert("验证码正在给 " + userNumber + " 发送途中~~~，快到啦！")
                } else {
                    error.style.display = "";
                    alert(userNumber + res.data.message)
                }
            });
        }
        /*alert("请稍等！正在准备发送验证码~~~")
        axios.post("/document/users/send/" + userNumber).then((res) => {
            if(res.data.flag){
                error.style.display = "none";
                alert("验证码正在给 " + userNumber + " 发送途中~~~，快到啦！")
            } else {
                error.style.display = "";
                alert(userNumber + "该账号已被注册过（不能为空！），请重新输入！")
            }
        });*/
    });
</script>
</html>
